<template>
  <el-container>
    <el-main>
      <!-- 表格  -->
      <vxe-grid
        ref="mainTable"
        column-key
        v-grid-drag-col
        :height="$store.getters.scrollerHeight()"
        :toolbar="tableToolbar"
        :columns="tableColumn"
        :data="tableData"
        :expand-config="{lazy: true, loadMethod: expanded }"
      >
        <!-- 快速查询 -->
        <template v-slot:toolbar_search>
          <rayd-quick-query v-model="filterName" @query="query"></rayd-quick-query>
        </template>
        <!-- 业务按钮 -->
        <template v-slot:toolbar_buttons></template>
        <!--  子表格模板 -->
        <template v-slot:subTable="{ row }">
          <vxe-grid
            :ref="`subTable` + row._XID"
            height="300"
            :columns="subTableColumn"
            :data="row.detail"
          >
            <!-- 允许空模板 -->
            <template v-slot:f_isnullable="{ row }">
              <el-tag
                effect="dark"
                :type="row.f_isnullable === '1' ? 'success' : 'info'"
              >{{ row.f_isnullable === '1' ? "是" : "否" }}</el-tag>
            </template>
            <!-- 主键模板 -->
            <template v-slot:f_key="{ row }">
              <el-tag
                effect="dark"
                :type="row.f_key === '1' ? 'success' : 'info'"
              >{{ row.f_key === '1' ? "是" : "否" }}</el-tag>
            </template>
          </vxe-grid>
        </template>
      </vxe-grid>
    </el-main>
  </el-container>
</template>

<script>
import { DatabaseTable } from "@/api";
export default {
  data() {
    return {
      /* vxe-grid */
      filterName: "", //查询实体
      tableData: [], //表格实体
      //工具栏配置
      tableToolbar: {
        refresh: { 
          query : ()=> {
            this.filterName = ''; //清空条件
            this.query();
          }
        },
        zoom: true,
        custom: true,
      },
      //列配置
      tableColumn: [
        {
          type: "expand",
          width: 30,
          slots: { content: "subTable" }
        },
        {
          type: "seq",
          title: "序号",
          width: 80,
          align: "left"
        },
        { type: "html", field: "name", title: "表名", sortable: true },
        { type: "html", field: "sumrows", title: "记录条数", sortable: true },
        { type: "html", field: "data", title: "使用大小", sortable: true },
        {
          type: "html",
          field: "index_size",
          title: "索引使用大小",
          sortable: true
        },
        { type: "html", field: "tdescription", title: "说明", sortable: true }
      ],
      //子列配置
      subTableColumn: [
        {
          type: "seq",
          title: "序号",
          width: 80,
          align: "left"
        },
        { field: "f_column", title: "字段名", sortable: true, align: "left" },
        { field: "f_datatype", title: "数据类型", sortable: true },
        { field: "f_length", title: "长度", sortable: true },
        {
          field: "f_isnullable",
          title: "允许空",
          sortable: true,
          slots: { default: "f_isnullable" }
        },
        { field: "f_identity", title: "标识", sortable: true },
        {
          field: "f_key",
          title: "主键",
          sortable: true,
          slots: { default: "f_key" }
        },
        { field: "f_defaults", title: "默认值", sortable: true },
        {
          field: "f_remark",
          title: "说明",
          sortable: true,
          width: 200,
          align: "left"
        }
      ]
    };
  },
  created() {
    //初始化
    this.init();
  },
  methods: {
    //初始化
    init() {
      this.$store.commit("SET_ISLOADING",true);
      //初始化数据
      this.query();
    },
    //列表数据
    query() {
      this.$store.commit("SET_ISLOADING",true);
      return DatabaseTable.GetList({queryjson:JSON.stringify({QueryInfo:this.filterName})}).then(res => {
        this.tableData = res;
        this.$store.commit("SET_ISLOADING",false);
      });
    },
    //行展开回调
    expanded({ row }) {
      return DatabaseTable.GetFieldList(row.name).then(res => {
        row.detail = res;
      });
    }
  }
};
</script>

<style lang="less" scoped>
</style>